<!--
 * @Author       : xinbaiyu
 * @Version      : V1.0
 * @Date         : 2025-03-05 10:26:02
 * @Description  : 对话内容的组件，包含一个头像和一段描述
-->
<template>
  <div class="talk-item" :class="`talk-item-${talkItemDetail.type}`">
    <div class="img-box">
      <img src="../assets/user1.png" v-if="talkItemDetail.type === 'user'" />
      <img src="../assets/ai.jpg" v-else />
    </div>
    <div class="talk-content">
      <div
        ref="contentBox"
        class="content-box"
        v-html="htmlDom"
        v-if="talkItemDetail.content"
      ></div>
      <div class="content-box-loading" v-if="!talkItemDetail.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineEmits, defineProps } from "vue";
import MarkdownIt from "markdown-it";
import MarkdownItAbbr from "markdown-it-abbr";
import MarkdownItAnchor from "markdown-it-anchor";
import MarkdownItFootnote from "markdown-it-footnote";
import MarkdownItHighlightjs from "markdown-it-highlightjs";
import MarkdownItSub from "markdown-it-sub";
import MarkdownItSup from "markdown-it-sup";
import MarkdownItTasklists from "markdown-it-task-lists";
import MarkdownItTOC from "markdown-it-toc-done-right";
import "highlight.js/styles/default.css";
import { ElMessage } from "element-plus";
import { sendMessage } from "@/message";

interface TalkItem {
  type: string;
  content: string;
}
const { talkItemDetail, sessionBox } = defineProps<{
  talkItemDetail: TalkItem;
  sessionBox: HTMLDivElement;
}>();

const md = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists)
  .use(MarkdownItTOC);

const compiledMarkdown = (str: string) => {
  return md.render(str);
};

const htmlDom = computed(() => {
  return compiledMarkdown(talkItemDetail.content)
})
</script>

<style scoped lang="less"></style>
